<template>
  <a-modal v-model:open="visible" :title="title" :maskClosable="false" v-bind="$attrs" :footer="null" @cancel="handleClosed" :width="400">
    <div class="log-file">
      <ul class="log-detail-list">
        <li v-for="(item, index) in dataList" :key="item.id" class="ellipsis">
          <Icon icon="ant-design:edit-outlined" class="icon-edit" style="font-size: 16px; display: inline-flex" />
          <div style="word-break: break-all; white-space: break-spaces">
            <a-popover placement="top" overlayClassName="file-popover">
              <template #content>
                <div class="ant-popover-inner-content">
                  <div class="ant-popover-inner-content-avatar">
                    <a-avatar :src="item.avatar" :size="47" />
                  </div>
                  <div class="ant-popover-inner-content-info">
                    <div class="ant-popover-inner-content-info-bold">
                      {{ item.realname }}
                    </div>
                    <div class="ant-popover-inner-content-info-other">
                      {{ item.mobile }}
                    </div>
                  </div>
                </div>
              </template>
              <a>{{ item.realname }}</a>
            </a-popover>
            <span v-if="item.dataContent.type == 'addUser'">
              添加了新成员
              <span v-for="user in item.dataContent.userData" :key="user.id">
                <a-popover placement="top" overlayClassName="file-popover">
                  <template #content>
                    <div class="ant-popover-inner-content">
                      <div class="ant-popover-inner-content-avatar">
                        <a-avatar :src="user.avatar" :size="47" />
                      </div>
                      <div class="ant-popover-inner-content-info">
                        <div class="ant-popover-inner-content-info-bold">
                          {{ user.realname }}
                        </div>
                        <div class="ant-popover-inner-content-info-other">
                          {{ user.mobile }}
                        </div>
                      </div>
                    </div>
                  </template>
                  <a>{{ user.realname }}</a>
                </a-popover>
              </span>
            </span>
            <span v-else-if="item.dataContent.type == 'delUser'">
              移除了成员
              <span v-for="user in item.dataContent.userData" :key="user.id">
                <a-popover placement="top" overlayClassName="file-popover">
                  <template #content>
                    <div class="ant-popover-inner-content">
                      <div class="ant-popover-inner-content-avatar">
                        <a-avatar :src="user.avatar" :size="47" />
                      </div>
                      <div class="ant-popover-inner-content-info">
                        <div class="ant-popover-inner-content-info-bold">
                          {{ user.realname }}
                        </div>
                        <div style="color: #757575; display: block; margin-top: 4px">
                          {{ user.mobile }}
                        </div>
                      </div>
                    </div>
                  </template>
                  <a>{{ user.realname }}</a>
                </a-popover>
              </span>
            </span>
            <span v-else-if="item.dataContent.type == 'changeAuth'">
              将
              <span v-for="user in item.dataContent.userData" :key="user.id">
                <a-popover placement="top" overlayClassName="file-popover">
                  <template #content>
                    <div class="ant-popover-inner-content">
                      <div class="ant-popover-inner-content-avatar">
                        <a-avatar :src="user.avatar" :size="47" />
                      </div>
                      <div class="ant-popover-inner-content-info">
                        <div class="ant-popover-inner-content-info-bold">
                          {{ user.realname }}
                        </div>
                        <div class="ant-popover-inner-content-info-other">
                          {{ user.mobile }}
                        </div>
                      </div>
                    </div>
                  </template>
                  <a>{{ user.realname }}</a>
                </a-popover>
              </span>
              的权限从
              {{
                item.dataContent.oldAuthority == 'owner'
                  ? '自有的'
                  : item.dataContent.oldAuthority == 'admin'
                  ? '管理员'
                  : item.dataContent.oldAuthority == 'editable'
                  ? '可编辑'
                  : item.dataContent.oldAuthority == 'readonly'
                  ? '只读'
                  : ''
              }}
              调整为
              {{
                item.dataContent.newAuthority == 'owner'
                  ? '自有的'
                  : item.dataContent.newAuthority == 'admin'
                  ? '管理员'
                  : item.dataContent.newAuthority == 'editable'
                  ? '可编辑'
                  : item.dataContent.newAuthority == 'readonly'
                  ? '只读'
                  : ''
              }}
            </span>
            <span v-else-if="item.dataContent.type == 'add'">
              创建了 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} {{ item.dataContent.fileName }}
            </span>
            <span v-else-if="item.dataContent.type == 'move'">
              移动此 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} 到 {{ item.dataContent.toFolderName }}
            </span>
            <span v-else-if="item.dataContent.type == 'copy'">
              复制此 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} 到 {{ item.dataContent.toFolderName }}
            </span>
            <span v-else-if="item.dataContent.type == 'rename'">
              重命名了 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} {{ item.dataContent.oldFileName }} 为
              {{ item.dataContent.newFileName }}
            </span>
          </div>
          <div class="detail-log-time">
            {{ getLogTime(item.createTime) }}
          </div>
        </li>
      </ul>
    </div>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import moment from 'moment/moment';
  import 'moment/locale/zh-cn';
  import { getDetailLog } from '../files.api';

  export default defineComponent({
    name: 'FolderLogModal',
    emits: ['success', 'closed'],
    setup(props, { emit }) {
      //弹窗显隐标记
      const visible = ref(false);
      //数据信息
      const dataModal = ref();
      //标题
      const title = ref('');
      //数据
      const dataList = ref([]);

      //显示modal
      function showModal(record) {
        dataModal.value = { ...record };
        visible.value = true;
        title.value = dataModal.value.fileName;
        loadLog(dataModal.value.fileId);
      }

      async function loadLog(fileId) {
        dataList.value = await getDetailLog({ fileId: fileId });
        dataList.value.forEach((item) => {
          item.dataContent = JSON.parse(item.dataContent);
        });
      }

      function getLogTime(val) {
        if (moment(val).isSame(moment(), 'day') || moment(val).isSame(moment().subtract(1, 'days'), 'day')) {
          return moment(val).calendar();
        } else {
          return val;
        }
      }

      //关闭后的回调
      function handleClosed() {
        visible.value = false;
        emit('closed');
      }

      return {
        visible,
        title,
        dataList,
        getLogTime,
        showModal,
        handleClosed,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import '../less/FileLog';
</style>
